<!-- 数据共享 -->
<template>
  <div id='authentic'>
    <div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
      <div style='display: flex;display: -webkit-flex;justify-content: center'>
        <div v-show='!showDataDetail&&!showSupplierDetail'>
          <!-- 上面筛选条件 -->
          <div class='filter-wrapper'>
            <div class='filter-inner' style='margin-top: 20px'>
              <span style='color:white;width: 80px'>分类：</span>
              <el-radio-group v-model='selectedCategory' size='small'>
                <el-radio-button plain v-for='item in categoryList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.localName }}</div>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class='filter-inner'>
              <span style='color:white;width: 80px'>类型：</span>
              <el-radio-group v-model='selectedType' size='small'>
                <el-radio-button plain v-for='item in typeList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.localName }}</div>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class='filter-inner'>
              <span style='color:white;width: 80px'>确权状态：</span>
              <el-radio-group v-model='proprietorshipStatus' size='small'>
                <el-radio-button plain v-for='item in authorityList' :key='item.id' class='radio' :label='item.value'>
                  <div>{{ item.label }}</div>
                </el-radio-button>
              </el-radio-group>
              <el-button type='primary' size='mini' @click='searchForList(0)' style='width: 75px;margin-top: 5px;margin-left: 6.5%;'>筛选</el-button>
            </div>
            <el-button type='success' size='mini' @click='create()' style='width: 75px;margin-top: 5px;margin-left: 90%;display: block;'>新建</el-button>
          </div>
          <!-- 列表 -->
          <div class='list-wrapper'>
            <el-card v-for='item in dataList' :key='item.id' style='margin: 10px'>
              <div class='card-content'>
                <div>
                  <el-image :src='item.imageUrl' alt='数据图片' class='card-image' />
                </div>
                <div style='margin-top: 10px;margin-left: 30px'>
                  <el-row style='width: 70%'>
                    <el-col :span='6'>
                      <el-tooltip placement='right'>
                        <!--                        <div slot="content">所有权：{{item.ownRight}}<br/>-->
                        <!--                          交易权：<span v-for='tradingItem in item.tradingRightList'>{{tradingItem.name}}&nbsp&nbsp</span><br/>-->
                        <!--                          使用权：<span v-for='usingItem in item.usingRightList'>{{usingItem.name}}&nbsp&nbsp</span></div>-->
                        <span class='data-name' @click='toDataDetail(item)'>{{ item.name }}</span>
                      </el-tooltip>
                    </el-col>
                    <el-col :span='4'>
                      <el-tag :type="item.proprietorshipStatus === 'APPROVED' ?'success':'warning'"
                              style='margin-left: 20px' effect='dark'>{{ item.proprietorshipStatusLocalName }}
                      </el-tag>
                    </el-col>
                    <el-col :span='4'>
                      <!-- <el-tag :type='checkStatus(item.resourceApplyStatus)' effect='dark'>
                        {{ item.resourceApplyStatusLocalName }}
                      </el-tag> -->
                    </el-col>
                  </el-row>
                  <div style='margin-top: 10px'>
                    <span class='text-description'>{{ item.description }}</span>
                  </div>
                  <div style='display:flex;justify-content:space-between;align-items:center;margin-top:20px;'>
                    <el-descriptions :column='4'>
                      <el-descriptions-item label='供应商'>
                        <!-- <el-tooltip placement='right'>
                          <span style='cursor: pointer'>{{ item.dataSupplier }}</span>
                        </el-tooltip> -->
                        {{ item.dataSupplier }}
                      </el-descriptions-item>
                      <el-descriptions-item label='分类'>{{ item.dataCategory }}</el-descriptions-item>
                      <el-descriptions-item label='类型'>{{ item.dataType }}</el-descriptions-item>
                    </el-descriptions>
                    <!-- 下载按钮，已确权的显示下载按钮 -->
                    <el-button v-if='item.proprietorshipStatus == "APPROVED"' style='margin-top: -12px;' type='success'
                               size='mini' @click='download(item.id)'>下载
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
          <div style='margin-right: 30px'>
            <el-pagination
              @size-change='handleSizeChange'
              :page-sizes='[5, 10, 15, 20]'
              layout='total, sizes, prev, pager, next, jumper'
              :total='totalItems'
              :page-size='pageSize'
              @current-change='handlePageChange'
            ></el-pagination>
          </div>
        </div>
        <!-- 明细 -->
        <div v-show='showDataDetail' style='width: 80%'>
          <el-card class='detail-card'>
            <el-button type='text' @click='showDataDetail=false'
                       style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
            </el-button>
            <div class='detail-content' style='font-size: 11pt'>
              <img :src='currentDataDetail.image' alt='数据图片' class='detail-image' style='margin-top: 30px' />
              <div style='margin-top: 30px;margin-left: 30px'>
                <el-row style='width: 90%'>
                  <el-col :span='9'>
                    <span class='data-name' style='font-size: 14pt'>{{ currentDataDetail.name }}</span>
                  </el-col>
                  <el-col :span='6'>
                    <el-tag :type="currentDataDetail.isAuthorized?'success':'warning'" style='margin-left: 20px'
                            effect='dark'>{{ currentDataDetail.isAuthorized ? '已确权' : '确权中' }}
                    </el-tag>
                  </el-col>
                </el-row>
                <div style='margin-top: 20px'>
                  <span class='text-description'>{{ currentDataDetail.description }}</span>
                </div>
                <el-descriptions :column='2' style='margin-top:20px;width: 50%;font-size: 11pt'>
                  <el-descriptions-item label='数据提供者'>{{ currentDataDetail.dataSupplier }}</el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <div class='detail-description'>
              <div>
                <span class='title-name'>数据信息：</span>
              </div>
              <el-descriptions title=' ' :column='3' style='width:100%;font-size: 11pt' border>
                <el-descriptions-item label='数据名称'>{{ currentDataDetail.name }}</el-descriptions-item>
                <el-descriptions-item label='数据类型'>{{ currentDataDetail.dataType }}</el-descriptions-item>
                <el-descriptions-item label='数据分类'>{{ currentDataDetail.dataCategory }}</el-descriptions-item>
                <el-descriptions-item label='注册时间'>{{ currentDataDetail.registrationTime | formatDate   }}</el-descriptions-item>
                <el-descriptions-item label='数据格式'>{{ currentDataDetail.dataFormat }}</el-descriptions-item>
                <el-descriptions-item label='数据大小'>{{ currentDataDetail.dataSize }}</el-descriptions-item>
              </el-descriptions>
              <div style='margin-top: 20px'>
                <span class='title-name'>数据样例：</span>
              </div>
              <el-descriptions title='' :column='3' style='width:100%;font-size: 11pt;margin-top: 20px' border>
                <el-descriptions-item v-for='item in currentDataDetail.dataExample' :key='item.label'
                                      :label='item.label'>
                  {{ item.value }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <div class='detail-description' style='padding-bottom:0;'>
              <div>
                <span class='title-name'>权属信息：</span>
              </div>
              <div id='diagramParentDiv' style=' width:100%;height:50vh'>
                <div id='dataDiagramDiv' style=' width:100%;height:45vh' />
              </div>
            </div>
          </el-card>
        </div>

        <div v-show='showSupplierDetail' style='width: 80%'>
          <el-card class='detail-card'>
            <el-button type='text' @click='showSupplierDetail=false'
                       style='float: right;margin-top: 20px;margin-right: 80px;font-size:12pt'>返回
            </el-button>
            <div class='detail-description' style='padding-bottom:0;'>
              <div>
                <span class='title-name'>账户信息：</span>
              </div>

              <div id='supplierParentDiv'>
                <div id='supplierDiagramDiv' style=' width:100%;height:20vh' />
              </div>
            </div>
          </el-card>
          <el-card class='detail-card'>
            <el-tabs v-model='activeName' type='card'>
              <el-tab-pane label='数据登记信息' name='1'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据登记信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>已确权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.confirmedDataList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(scope.row)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='registrationTime' label='注册时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='confirmedTime' label='确权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>未确权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.unconfirmedDataList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='registrationTime' label='注册时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label='数据交易信息' name='2'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据交易信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>交易权授权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.authorisedTradingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorisedTime' label='授权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='被授权方'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>使用权授权：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.authorisedUsingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorisedTime' label='授权时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='被授权方'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label='数据购买信息' name='3'>
                <div class='detail-description'>
                  <!--<div>
                    <span class="title-name">数据购买信息：</span>
                  </div>-->
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>交易权购买：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.purchasedTradingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='purchasedTime' label='购买时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='授权方'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style='margin-top: 20px'>
                    <span class='subtitle-name'>使用权购买：</span>
                  </div>
                  <div style='height: 40vh' class='table_box'>
                    <el-table
                      :data='currentSupplierDetail.purchasedUsingList'
                      height='38vh'
                      :header-row-style="{height: '4vh'}"
                      border
                      style='width:100%'>
                      <el-table-column prop='name' label='数据名称' :show-overflow-tooltip='true'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toDataDetail(-1)'>{{ scope.row.name }}</el-link>
                        </template>
                      </el-table-column>
                      <el-table-column prop='category' label='数据分类' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='type' label='数据类型' :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='purchasedTime' label='购买时间'
                                       :show-overflow-tooltip='true'></el-table-column>
                      <el-table-column prop='authorizedSupplier' label='授权方'>
                        <template slot-scope='scope'>
                          <el-link type='info' target='_blank' @click='toSupplierDetail(scope.row.authorizedSupplier)'>
                            {{ scope.row.authorizedSupplier }}
                          </el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>

          </el-card>
        </div>
      </div>
    </div>

  </div>
</template>

<script src='./js/index.js'>
</script>
<style lang='scss'>
@font-face {
  font-family: 'Alternate';
  //src: url('../../assets/iconfont/Alternate.ttf');
  font-style: normal;
  font-width: normal;
}

@import 'src/views/kt1/dataShare/css/dataShare';
</style>
